<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">123456</div>
    <ul>
        <li>abcdefghijklmn1</li>
        <li>abcdefghijklmn2</li>
        <li>abcdefghijklmn3</li>
        <li>abcdefghijklmn4</li>
        <li>abcdefghijklmn5</li>
    </ul>
    <ul id="nav">
        <li>lmn1</li>
        <li class="box">ablmn2</li>
        <li class="box">abcdlmn3</li>
        <li>abchilmn4</li>
        <li>fxssz5</li>
    </ul>
    <script>
        // 因为我们的文档页面从上往下执行,所以要先有标签,所以我们的script 写到标签下
        // 2.getElementById() get 获得 Element 元素 By 通过  Id 驼峰命名法
        // 参数id ,大小写敏感的字符串
        var timer = document.getElementById("time")
        console.log(timer); // div id="timer">123456</div>
        console.log(typeof timer); //object
        // 打印我们返回的元素对象 根号的查看里面的属性和方法
        console.dir(timer)

        // 2.getElementsByTagName
        var lis = document.getElementsByTagName('li');
        console.log(lis); // 返回的是 获取过来元素对象的集合 以伪数组的形式储存
        console.log(lis[0]);
        // 想要依次打印里面的元素对象我们可以采取遍历的方式
        for(var i= 0; i< lis.length; i++){
            console.log(lis[i]);
        }

        //3. element.getElementByTagName() 可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav');
        var navlis = nav.getElementsByTagName('li');
        console.log(navlis);

        // 4. getElementByClassName() 根据类名获得某些元素集合,记得选择器里面要加符号'.' '#'
        var boxs = document.getElementsByClassName('box')
        console.log(boxs);

        // 5. querySelector 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box')
        console.log(firstBox);
        var firstBox1 = document.querySelector('#nav')
        console.log(firstBox1);
        var firstBox2 = document.querySelector('li')
        console.log(firstBox2); //

        // 6.querySelectorAll()返回指定选择器的所有元素对象集合

    </script>
</body>
</html>